<template>
  <h3 style="margin:0 0 20px 0"><b>订单信息</b></h3>
  <el-table
      :data="orderDetailsStore.order.orderDetails" border highlight-current-row
      style="width: 100%"
  >
    <el-table-column align="center" type="index" width="55"/>
    <el-table-column align="center" label="模型预览" width="180">
      <template #default="scope">
        <el-button link type="primary" @click="openModelDialog(scope.row.model)">
          {{ decodeURI(scope.row.model.split('/').slice(-1)[0]) }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center" label="参数信息">
      <template #default="scope">
        <div style="display: grid;grid-template-columns: 1fr">
          <div style="display: grid;grid-template-columns: 1fr 1fr;">
            <el-text>材料： {{ scope.row.material.name || "无" }}</el-text>
            <el-text>颜色： {{ scope.row.material.color || "无" }}</el-text>
            <el-text>单价： {{ scope.row.material.price || "无" }}</el-text>
            <el-text>精度： {{ scope.row.material.materialPrecision || "无" }}</el-text>
          </div>
          <el-text>介绍： {{ scope.row.material.remarks || "无" }}</el-text>
        </div>
      </template>
    </el-table-column>
    <el-table-column align="center" label="数量" prop="quantity"/>
  </el-table>
  <h3 style="margin:20px 0"><b>其他信息</b></h3>
  <el-form
      ref="OrderFormRef" :model="orderDetailsStore.order" label-position="left"
      label-width="120px"
  >
    <el-form-item label="备注" prop="remarks">
      <el-input v-model="orderDetailsStore.order.remarks" placeholder="其他特殊需求在此备注"
                rows="6" type="textarea"/>
    </el-form-item>
    <div style="display: flex;justify-content:center">
      <el-button type="primary" @click="submitOrder">提交订单</el-button>
    </div>
  </el-form>
  <three-point v-model="dialog.visible" :url="dialog.url"/>
</template>
<script setup>
import {reactive} from "vue";
import ThreePoint from "@/components/threePoint.vue";
import {useOrderDetailsStore} from "@/stores/order.js";
import {useRouter} from "vue-router"
import {createOrder} from "@/apis/order.js";

const orderDetailsStore = useOrderDetailsStore()
const router = useRouter()

/** 模型预览弹窗 */
const dialog = reactive({
  visible: false,
  url: ""
})
const openModelDialog = url => {
  dialog.visible = true;
  dialog.url = url
}
const submitOrder = () => {
  let order = {
    status: 1,
    remarks: orderDetailsStore.order.remark,
    orderDetails: []
  }
  for (let item of orderDetailsStore.order.orderDetails) {
    order.orderDetails.push({
      materialId: item.material.id,
      quantity: item.quantity,
      fileEntity: {model: item.model}
    })
  }
  createOrder(order).then(({data}) => {
    orderDetailsStore.order.id = data.id
    orderDetailsStore.order.status = data.status
    router.push(
        {name: "muterorder"}
    );
  })
}

</script>
<style scoped>
</style>